<template>
  <el-dialog title="发放优惠券" :visible.sync="data.bSwitch" width="600px">
    <el-descriptions :column="2">
      <el-descriptions-item label="优惠券名称">{{
        data.row.name
      }}</el-descriptions-item>
      <el-descriptions-item label="优惠券类型">
        <el-tag size="small" v-if="data.row.type">金额</el-tag>
        <el-tag type="warning" size="small" v-else>折扣</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="折扣">{{
        `${data.row.discount * 10}折`
      }}</el-descriptions-item>
      <el-descriptions-item label="有效期">
        <span>{{
          data.row.startDate && data.row.endDate
            ? `${data.row.startDate}-${data.row.endDate}`
            : "永久"
        }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <span slot="footer" class="dialog-footer">
      <el-button @click="data.bSwitch = false">取 消</el-button>
      <el-button type="primary" @click="data.bSwitch = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          row: {},
          bSwitch: false,
        };
      },
    },
  },
  data() {
    return {
      ruleForm: {
        name: null,
        type: 0,
        discount: 1,
        amount: undefined,
        status: 0,
        validity: [],
      },
    };
  },
  created() {
    this.data.id && this.getDetail();
  },
  methods: {
    // 获取详情
    getDetail() {
      getBanner(this.data.id).then((res) => {
        const { name, coverUrl, weight, status, linkUrl } = res.advert;
        this.ruleForm.name = name;
        this.ruleForm.coverUrl = coverUrl;
        this.ruleForm.weight = weight;
        this.ruleForm.status = status;
        this.ruleForm.linkUrl = linkUrl;
      });
    },
    // 提交
    onSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.data.id) {
            this.updateSubmit({ uuid: this.data.id, ...this.ruleForm });
          } else {
            this.addSubmit(this.ruleForm);
          }
        } else {
          return false;
        }
      });
    },
    // 新增
    addSubmit(params) {
      addBanner(params).then((res) => {
        this.$emit("refresh");
        this.$modal.msgSuccess("成功");
        this.data.bSwitch = false;
      });
    },
    updateSubmit(params) {
      updateBanner(params).then((res) => {
        this.$emit("refresh");
        this.$modal.msgSuccess("成功");
        this.data.bSwitch = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 16px;
}
</style>